<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <a>{{username}}</a>
    <p v-text="gender">性别</p>
    <p>性别：{{gender}}</p>
    <div v-html="info"></div>
    <label>
        <input type="text" v-bind:placeholder="tips"/>
    </label>
    <hr>
    <img v-bind:src="photo" width="150px" height="150px" alt="zzzz"/>
    <div>1+2={{1+2}}</div>
    <div>{{tips}}反转结果：{{tips.split('').reverse().join('')}}</div>
    <div :title="'box' + index">没啥</div>
    <p>count:{{count}}</p>
    <button @click="add(1,$event)">+1</button>
    <a href="https://www.baidu.com" @click.prevent="show">跳转到百度</a>
    <br/>
    <input type="text" @keyup.esc="clearInput($event)" @keyup.enter="commitInput($event)"/>
    <input type="text" v-model="inputModel"/>
    <p>inputModel:{{inputModel}}</p>
    <select v-model="city">
        <option value="">请选择城市</option>
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="杭州">杭州</option>
    </select>
    <p>city:{{city}}</p>
    <div v-if="!flag1">
        为刚衣服弗莱格
    </div>
    <div v-else>
        为刚衣服埃尔斯
    </div>
    <div v-show="flag2">
        为纲手弗莱格
    </div>
    <p v-if="flag3 === 1">
        111
    </p>
    <p v-else-if="flag3 === 2">2222</p>
    <p v-else>333</p>
    <table class="table table-border table-striped">
        <thead>
        <tr>
            <td>index</td>
            <td>id</td>
            <td>name</td>
        </tr>
        </thead>
        <tbody>
            <tr v-for="(item,index) in list" :key="item.id" :title="item.name">
                <td>{{index}}</td>
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
            </tr>
        </tbody>
    </table>
</div>

<script src="./lib/vue-2.6.12.js"></script>
<script>
    const vm = new Vue({
            // 表示vm实例要控制哪个dom
            el: "#app",
            // 渲染到页面的数据
            data: {
                username: "张三",
                gender: "女",
                info: "<p style='color: red'>草拟吗</p>",
                tips: "请输入用户名",
                photo: "https://cn.vuejs.org/images/logo.svg",
                index: 3,
                count: 0,
                inputModel: "sb",
                city: "北京",
                flag1: true,
                flag2: true,
                flag3: 3,
                list: [
                    {id: 1, name: "阿虚"},
                    {id: 2, name: "掌中萌虎"},
                    {id: 3, name: "面码"},
                ]

            },
            methods: {
                add(c, e) {
                    this.count += c;
                    // 判断count是否是偶数
                    if (this.count % 2 === 0) {
                        e.target.style.backgroundColor = 'red'
                    } else {
                        e.target.style.backgroundColor = ''
                    }
                }
                ,
                show() {
                    console.log("点击了A链接")
                }
                ,
                clearInput(e) {
                    e.target.value = ''
                }
                ,
                commitInput(e) {
                    e.target.value = "commit"
                }
            }
            ,
        })
    ;
</script>
</body>
</html>